<template>
  <!-- 高级搜索 -->
  <!-- option说明
              close:控制是否有折叠开关
              示例可看:/supplierManagement/delivernoti.vue
    -->
  <!--  type说明
              input           输入框
              dropdown        下拉框
              daterange   年月日,开始结束
              datetime        年月日时分秒,单个
    -->
  <!--
    				refs父组件可调用子组件方法
    				clearForm -- 清理form
    				searchForm -- 查询form
    				exportForm -- 导出form

    -->
  <div class="dr-form">
    <div class="formTop" :style="{ height: toggleHeight}">
      <div id="formItemBox" :class="item.type==='daterange'?['formItem','formDatetimerange']:['formItem']" v-for="(item,index) in opt.items" v-if="opt.items.length>0" :key="index">
        <label>{{item.label}}</label>
        <!--input-->
        <el-input class="fontItemSize" v-model="opt.items[index].value" :placeholder="item.placeholder" v-if="item.type==='input'" @change="toParent" size="small"></el-input>
        <!--日期 开始结束-->
        <el-date-picker class="fontItemSize" v-model="opt.items[index].value" :placeholder="item.placeholder" v-if="item.type==='daterange'"  value-format="yyyy-MM-dd HH:mm:ss" @change="toParent" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small"></el-date-picker>

        <el-date-picker class="fontItemSize" size="small" v-model="opt.items[index].value" v-if="item.type==='datetime'" @change="toParent" type="datetime" :placeholder="item.placeholder"></el-date-picker>
        <!--下拉菜单-->
        <el-select class="fontItemSize" size="small" v-model="opt.items[index].value" :placeholder="item.placeholder" v-if="item.type==='dropdown'" @change="toParent">
          <el-option :label="data.label" :value="data.value" v-for="(data,index) in item.data" :key="index"></el-option>
        </el-select>
        <!--可搜索下拉菜单-->
        <el-select  class="fontItemSize" size="small" filterable v-model="opt.items[index].value" :placeholder="item.placeholder" v-if="item.type==='dropdownSearch'" @change="toParent">
          <el-option v-for="(data,index) in item.data" :key="index" :label="data.label" :value="data.value">
          </el-option>
        </el-select>
        <div class="jifenzhi" v-else-if="item.type==='inputDouble'">
            <el-input class="fontItemSize" v-model="opt.items[index].value" :placeholder="item.placeholder"  @change="toParent" size="small" style="flex:1"></el-input>
            <p style="width: 6px;text-align: center;">-</p>
            <el-input class="fontItemSize" v-model="opt.items[index].value2" :placeholder="item.placeholder"  @change="toParent" size="small" style="flex:1"></el-input>
        </div>
        <el-input class="fontItemSize" v-model="opt.items[index].value" placeholder="请输入开始值" v-if="item.type==='moreinput'" @change="toParent" size="small"></el-input>
        <!-- <el-select class="fontItemSize" size="small" v-model="opt.items[index].value" :placeholder="item.placeholder" v-if="item.type==='searchDropdown'" @change="toParent" filterable>
          <el-option :label="data.label" :value="data.value" v-for="(data,index) in item.data" :key="index"></el-option>
        </el-select> -->
      </div>

      <div class="endFormItem normal-btn-group" v-show="closeToggle">
        <div v-for="(item,index) in opt.btnGroup" :key="index">
          <div v-if="item.type==='search'" class="normal-btn query-btn" @click="toParent(item.type)">
            <img class="icon" src="@/assets/img/button_search.png" alt> {{item.label}}
          </div>
          <div v-if="item.type==='clear'" class="normal-btn empty-input-btn" @click="toParent(item.type)">
            <img class="icon" src="@/assets/img/button_delete.png" alt> {{item.label}}
          </div>
          <div v-if="item.type==='export'" class="normal-btn export-exl-btn" @click="toParent(item.type)">
            <img class="icon" src="@/assets/img/button_export.png" alt> {{item.label}}
          </div>
          <div v-if="item.type==='create'" class="normal-btn create-exl-btn" @click="toParent(item.type)">
            <img class="icon" src="@/assets/img/button_export.png" alt> {{item.label}}
          </div>
        </div>
      </div>
    </div>
    <p @click="toggle" class="closeTitle" v-if="opt.close">
      {{closeTitle}}
      <i class="el-icon-arrow-up" v-show="closeToggle"></i>
      <i class="el-icon-arrow-down" v-show="!closeToggle"></i>
    </p>
  </div>
</template>

<script>
  import {
    objDeepCopy
  } from "@/assets/js/common.js";
  export default {
    //name:'advancedSearch',
    data() {
      return {
        toggleHeight: 30,
        defaultOpt: {},
        opt: {
          items: []
        },
        btnSrc: {
          search: "@/assets/img/button_search.png",
          clear: "@/assets/img/button_delete.png",
          export: "@/assets/img/button_export.png"
        },
        closeTitle: "收起",
        closeToggle: true
      };
    },
    name: "advancedSearch",
    // props: {
    //   option: Object,
    //   clearCtrl: Boolean,
    //   exportCtrl: Boolean,
    //   searchCtrl: Boolean
    // },
    props: ["option"],
    mounted() {
      this.initData();
    },
    methods: {
      initData() {
        this.opt = objDeepCopy(this.option);
        this.defaultOpt = objDeepCopy(this.option); //搜索框的信息
      },
      getEmitData() {
        const data = this.opt.items;
        let newData = {};
        for (let i in data) {
          if (data[i].value) {
            newData[data[i].key] = data[i].value;
          }
        }
        return newData;
      },
      clearForm() {
        this.opt = objDeepCopy(this.defaultOpt);
        // console.log('clearForm')
        this.$emit("onClear");
      },
      exportForm() {
        this.$emit("onExport");
      },
      searchForm() {
        this.$emit("onSearch", this.opt.items);
      },
      createForm(){
        this.$emit("onCreate");
      },
      toParent(val) {
        const value = this.getEmitData();
        switch (val) {
          case "search":
            this.searchForm();
            break;
          case "export":
            this.exportForm();
            break;
          case "clear":
            this.clearForm();
            break;
          case "create":
            this.createForm();
            break;
          default:
            this.$emit("getChild", value);
            break;
        }
      },
      toggle() {
        if (this.closeToggle === true) {
          this.closeToggle = false;
          this.toggleHeight = 104 + "px";
          this.closeTitle = "高级搜索";
        } else {
          this.toggleHeight = "auto";
          this.closeToggle = true;
          this.closeTitle = "收起";
        }
      }
    },
    watch: {
      option: {
        handler() {
          this.opt = objDeepCopy(this.option);
        },
        immediate: true,
        deep: true
      }
    }
  };
</script>

<style scoped lang="less">
  .normal-btn-group .normal-btn {
      width: 72px;
      height: 32px;
      border-radius: 16px;
      font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
      font-size: 14px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      margin-right: 16px;
      cursor: pointer;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
  }
  .normal-btn-group .create-exl-btn{
    background-color: #222;
    color: #fff;
  }
  .fontItemSize /deep/ *{
      font-size: 14px;
  }
  .dr-form {
    border-radius: 8px;
    background: #fff;
    margin-top: 10px;
    padding: 0 10px;
  }
  .formTop {
    overflow: hidden;
  }
  .closeTitle {
    height: 25px;
    font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 25px;
    letter-spacing: 0px;
    color: #7e6b5a;
    text-align: center;
    padding: 10px 0;
    cursor: pointer;
  }
  .endFormItem {
    flex-grow: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-self: center;
  }
  .formItem {
    padding: 10px 0;
    >div:last-child {
      flex-shrink: 10000;
      width: 100%;
    }
    >label {
      line-height: 32px;
      padding-right: 5px;
      width: 85px;
      text-align: right;
      color: #222;
      font-size: 14px;
    }
  }
  .jifenzhi{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  @media only screen and (min-width: 1200px) {
    .formTop {
      display: flex;
      flex-wrap: wrap;
      .formItem {
        width: 24%;
        padding-right: 1%;
        font-size: 12px;
        display: flex;
      }
      .formDatetimerange {
        width: 49% !important;
      }
    }
  }
  @media only screen and (max-width: 1199px) {
    .formTop {
      display: flex; // justify-content: space-between;
      flex-wrap: wrap;
      .formItem {
        width: 48%;
        padding-right: 2%;
        font-size: 12px;
        display: flex;
        label {
          width: 100px;
          text-align: right;
        }
      }
      .formDatetimerange {
        width: 98% !important;
      }
    }
  }
  @media only screen and (max-width: 1024px) {
    .formTop {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .formItem {
        width: 96%;
        font-size: 12px;
        display: flex;
        label {
          width: 100px;
          text-align: right;
        }
      }
      .formDatetimerange {
        width: 96% !important;
      }
    }
  }
</style>
